<template>
	<view class="page drug-detail">
		<!-- 轮播图 -->
		<view class="swiper-box">
			<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
				<swiper class="swiper" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange">
					<swiper-item class="swiper-item" v-for="(item, index) in banners" :key="index">
						<view class="item bg-cover" :style="{backgroundImage: 'url(' + item + ')'}"></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- 价格 -->
		<view class="part1">
			<view class="p1 flex-row-start">
				<text class="font16 font-b font-ff4646">¥{{info.spec_info.goods_price}}</text>
				<text class="font12 font-line font-969696">¥{{info.spec_info.line_price}}</text>
			</view>
			<view class="p2 font15">{{info.goods_name}} {{info.spec_name}}</view>
			<view class="p3 font13 font-969696">厂商：{{info.manufacturer}}</view>
		</view>
		<!-- 详情 -->
		<view class="part2 box-shadow">
			<view class="font14 font-b">药品说明</view>
			<view class="content">
				<rich-text :nodes="info.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dotsStyles: {
					width: 3,
					height: 3,
					backgroundColor: 'rgba(51, 51, 51, .3)',
					border: '1px rgba(51, 51, 51, .3) solid',
					selectedBackgroundColor: '#6bcbb6',
					selectedBorder: '1px #6bcbb6 solid'
				},
				bannerCurrent: 0,
				banners: [],
				info: {}
			}
		},
		onLoad: function(options) {
			let $this = this
			this.id = options.id
			this.$Http({
				url: 'goodsDetails',
				data: {goods_id: options.id}
			}).then(res => {
				if (res.code == 1) {
					res.data.content = res.data.content ? res.data.content.replace(/\<img/g, '<img style="display:block;max-width:100%;height:auto;"') : ''
					$this.info = res.data
					
					let arr = res.data.images.split(',')
					arr.forEach(item => {
						$this.banners.push($this.$store.state.http_img + item)
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			})
		},
		methods: {
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
